<template>
	<view>
		<view class="" style="padding: 10rpx;padding-left: 20rpx;color: #aaa;font-size: 27rpx;">
			左滑取消关注，点击查看详情
		</view>
		<u-skeleton rows="8" :title="false" :loading="true" :animate="true" rowsHeight="60" v-if="!cnlVisible"></u-skeleton>
		<uni-swipe-action v-else-if="cnls.length">
		    <uni-swipe-action-item :show="item.isShow" :right-options="options" @click="bindClick" @change="swipeChange($event, item)" v-for="item in cnls" :key="item.CnlCode">
				<view class="list-item" @click="showSwiperAction(item)">
					<view class="list-item-left">
						<view class="cnl-title">{{item.DeviceName}}</view>
						<view class="cnl-code">{{item.buwei}}<text style="margin: 0 10rpx;">{{item.DeviceCode}}</text><text style="font-size: 20rpx;color: #aaa;"> {{item.des}}</text></view>
					</view>
					<view class="list-item-right">
						<view class="list-item-right-top">
							<view class="cnl-val" v-if="item.Type != 1">{{item.Val}} {{item.Unit}}</view>
							<view class="cnl-val" v-else>
								<image src="../../../static/theme/default/home/jihuo.png" mode="" v-if="item.Val == 1"></image>
								<image src="../../../static/theme/default/home/weijihuo.png" mode="" v-if="item.Val == 0"></image>
							</view>
							<view class="list-item-icon">
								<image src="../../../static/theme/default/home/yujing.png" mode="" v-if="item.Stat != '13' && item.Stat != ''"></image>
							</view>
							<view class="" style="clear: both;"></view>
						</view>
						<view class="cnl-datetime">{{item.DateTime}}</view>
					</view>
				</view>
		    </uni-swipe-action-item>
		</uni-swipe-action>
		<no-data v-else></no-data>
	</view>
</template>

<script>
	import _custom from '../../../common/_custom.js'
	import _data from '../../../common/_data.js'
	import {getTableSuffix} from '../../../common/custom_util.js'
	import NoData from '@/components/custom/no-data/no-data.vue'
	
	export default {
		components: {
			NoData
		},
		data() {
			return {
				cnls: [],
				options:[
					{
						text: '取消关注',
						style: {
							backgroundColor: '#dd524d'
						}
					}, {
						text: '置顶',
						style: {
							backgroundColor: '#007aff'
						}
					}
				  ],
				obsusername: _data.localData('name'),
				cnlVisible: false
			}
		},
		onShow() {
			this.getFocusCnls()
		},
		onPullDownRefresh() {
			this.getFocusCnls()
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: './equipment/index'
			})
		},
		methods: {
			showSwiperAction(v) {
				// this.cnls.forEach(item => {
				// 	if(item.CnlCode + item.CnlCodeSuffix == v.CnlCode + v.CnlCodeSuffix) {
				// 		item.isShow = item.isShow == 'none' ? 'right' : 'none'
				// 	}
				// })
				uni.navigateTo({
					url: '/pages/home/child/equipment/cnl?data=' + JSON.stringify(v)
				})
			},
			swipeChange(e,v) {
				if(e == 'right') {
					this.currentCnl = v
				} else {
					this.currentCnl = {}
				}
			},
			bindClick(e) {
				if(e.index == '1') {
					this.setCnlTop()
				} else if(e.index == '0') {
					this.unFocusCnl()
				}
				this.cnls.forEach(item => {
					item.isShow = 'none'
				})
				
			},
			setCnlTop() {
				let that = this;
				_custom.getDataJava({
					apiname: 'setFollowCnlCodeTop',
					code: 2,
					apiparam: {
						cnlcode: this.currentCnl.CnlCode,
						obsusername: this.obsusername
					},
					success(res) {
						that.getFocusCnls()
						uni.showToast({
							title: '置顶成功',
							icon: 'none'
						})
					}
				})
			},
			unFocusCnl() {
				let that = this;
				_custom.getDataJava({
					apiname: 'delFollowCnlCode',
					code: 4,
					apiparam: {
						cnlcode: this.currentCnl.CnlCode,
						obsusername: this.obsusername,
					},
					success(res) {
						that.getFocusCnls()
						uni.showToast({
							title: '取消关注成功!',
							icon: 'none'
						})
					}
				})
			},
			getFocusCnls() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getFollowCnlCodeData',
					apiparam: {
						obsusername: this.obsusername,
						tablesuffix: getTableSuffix()
					},
					success(res) {
						uni.stopPullDownRefresh()
						that.cnls = []
						if(res.length && Object.keys(res[0]).length) {
							res.forEach(item => {
								if(item.Type == '0') {
									item.Val = (item.Val * 1).toFixed(2)
								}
								if(item.Unit == '无') {
									item.Unit = ''
								}
								item.isShow = 'none'
								item.des = item.Name
							})
							that.cnls = res
						}
						that.cnlVisible = true
					}
				})
			},
		}
	}
</script>

<style>
	.content-box {
		flex: 1;
		height: 44px;
		line-height: 44px;
		padding: 0 15px;
		position: relative;
		background-color: #fff;
		border: 1px solid #f5f5f5;
	}
	
	.list-item {
		min-height: 100rpx;
		display: flex;
		padding: 20rpx 40rpx;
		background-color: #fff;
		margin: 10rpx 0;
		position: relative;
	}
	
	.list-item-icon {
		float: right;
		display: flex;
		justify-content: start;
		align-items: center;
		margin-right: 20rpx;
	}
	
	.list-item-icon > image {
		width: 45rpx;
		height: 45rpx;
	}
	
	.list-item-left {
		flex: 5;
	}
	
	.list-item-right {
		flex: 4;
		text-align: right;
	}
	
	.list-item-right-top {
		position: absolute;
		top: 36%;
		right: 20rpx;
		transform: translateY(-50%);
	}
	
	.cnl-title {
		font-size: 30rpx;
		font-weight: bold;
	}
	
	.cnl-code {
		font-size: 25rpx;
		width: 400rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.cnl-val {
		float: right;
		font-size: 30rpx;
		color: #5BCFF6;
		font-weight: bold;
	}
	
	.cnl-val > image {
		width: 32rpx;
		height: 32rpx;
	}
	
	.cnl-datetime {
		font-size: 20rpx;
		position: absolute;
		bottom: 25rpx;
		right: 20rpx;
	}
</style>
